import 'package:extended_image/extended_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_application_1/plugins/extended_image.dart';
import 'package:flutter_application_1/utils/source_utils.dart';
import 'package:flutter_application_1/utils/utils.dart';

import 'price_widget.dart';

class GameItemData {
  String cover;
  String avatar;
  String name;
  String price;
  int peopleCount;

  GameItemData({
    required this.cover,
    required this.avatar,
    required this.name,
    required this.price,
    this.peopleCount = 0,
  });
}

class GameItem extends StatefulWidget {
  final GameItemData data;

  GameItem({
    required this.data,
  });

  @override
  _GameItemState createState() => _GameItemState();
}

class _GameItemState extends State<GameItem> {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 650 * Utils.rpx,
      height: 300 * Utils.rpx,
      decoration: BoxDecoration(
        image: DecorationImage(
          image: AssetImage(
            ImageUtils.wrapAssets('game-wrap-bg.png'),
          ),
        ),
      ),
      child: Stack(
        children: [
          // 封面
          Positioned(
            top: 27 * Utils.rpx,
            left: 58 * Utils.rpx,
            child: ClipRRect(
              borderRadius: BorderRadius.circular(20 * Utils.rpx),
              child: ExtendedImage.network(
                widget.data.cover,
                width: 518 * Utils.rpx,
                height: 188 * Utils.rpx,
                fit: BoxFit.cover,
                loadStateChanged: commonLoadStateChanged,
              ),
            ),
          ),
          // 头像、正在玩的人数
          Positioned(
            top: 36 * Utils.rpx,
            right: 80 * Utils.rpx,
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                ClipRRect(
                  borderRadius: BorderRadius.circular(40 * Utils.rpx),
                  child: ExtendedImage.network(
                    widget.data.avatar,
                    width: 40 * Utils.rpx,
                    height: 40 * Utils.rpx,
                    fit: BoxFit.cover,
                    loadStateChanged: commonLoadStateChanged,
                  ),
                ),
                SizedBox(width: 5),
                Text(
                  '${widget.data.peopleCount}人正在玩',
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 22 * Utils.rpx,
                  ),
                )
              ],
            ),
          ),
          // 名称、价格
          Positioned(
            bottom: 22 * Utils.rpx,
            left: 90 * Utils.rpx,
            right: 90 * Utils.rpx,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                // 名称
                Container(
                  height: 44 * Utils.rpx,
                  padding: EdgeInsets.symmetric(horizontal: 20 * Utils.rpx),
                  decoration: BoxDecoration(
                    color: Color.fromRGBO(136, 208, 109, 1),
                    borderRadius: BorderRadius.circular(44 * Utils.rpx),
                  ),
                  alignment: Alignment.center,
                  child: Text(
                    widget.data.name,
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 22 * Utils.rpx,
                      height: 1.1,
                    ),
                  ),
                ),
                // 价格
                PriceWidget(
                  price: widget.data.price,
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}
